/* ==========================================================================
   Typography
========================================================================== */

p {
    line-height: $line-height-base * 1.25;
}

label {
    padding-top: 0;
}

.mx-title {
    margin: $font-header-margin;
    color: $font-color-header;
    font-size: $font-size-h1;
    font-weight: $font-weight-header;
}

h1,
.h1,
.h1 > * {
    font-size: $font-size-h1;
}

h2,
.h2,
.h2 > * {
    font-size: $font-size-h2;
}

h3,
.h3,
.h3 > * {
    font-size: $font-size-h3;
}

h4,
.h4,
.h4 > * {
    font-size: $font-size-h4;
}

h5,
.h5,
.h5 > * {
    font-size: $font-size-h5;
}

h6,
.h6,
.h6 > * {
    font-size: $font-size-h6;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin: $font-header-margin;
    color: $font-color-header;
    font-weight: $font-weight-header;
    line-height: 1.3;
}


//== Design Properties
//## Helper classes to change the look and feel of the component
//-------------------------------------------------------------------------------------------------------------------//

// Text size 
.text-small {
    font-size: $font-size-small !important;
}

.text-large {
    font-size: $font-size-large !important;
}

// Text Weights 
.text-light,
.text-light > *,
.text-light label {
    font-weight: $font-weight-light !important;
}

.text-normal,
.text-normal > *,
.text-normal label {
    font-weight: $font-weight-normal !important;
}

.text-semibold,
.text-semibold > *,
.text-semibold label {
    font-weight: $font-weight-semibold !important;
}

.text-bold,
.text-bold > *,
.text-bold label {
    font-weight: $font-weight-bold !important;
}

// Color variations
.text-default,
.text-default:hover {
    color: $font-color-default !important;
}

.text-primary,
.text-primary:hover {
    color: $brand-primary !important;
}

.text-info,
.text-info:hover {
    color: $brand-info !important;
}

.text-success,
.text-success:hover {
    color: $brand-success !important;
}

.text-warning,
.text-warning:hover {
    color: $brand-warning!important;
}

.text-danger,
.text-danger:hover {
    color: $brand-danger !important;
}

.text-header {
    color: $font-color-header !important;
}

.text-detail {
    color: $font-color-detail !important;
}

.text-white {
    color: #FFFFFF;
}

// Alignment options
.text-left {
    display: block;
    text-align: left !important;
}
.text-center {
    display: block;
    text-align: center !important;
}
.text-right {
    display: block;
    text-align: right !important;
}
.text-justify {
    text-align: justify !important;
}

// Transform options
.text-lowercase {
    text-transform: lowercase !important;
}
.text-uppercase {
    text-transform: uppercase !important;
}
.text-capitalize {
    text-transform: capitalize !important;
}

// Wrap options
.text-break {
    word-break: break-all !important;
    word-break: break-word !important;
    -ms-word-break: break-all !important;
    -webkit-hyphens: auto !important;
    -moz-hyphens: auto !important;
    hyphens: auto !important;
}

.text-nowrap {
    white-space: nowrap !important;
}
